<template>
  <!-- 选择弹窗 组件位置 -->
  <div id="selectPaper">
    <el-dialog
      :title="title"
      class="dialogClass"
      width="70%"
      id="eldialog__body"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <hr
        style="
          width: 104%;
          margin-left: -22px;
          background-color: #ccc;
          height: 0.2px;
          border: none;
        "
      />
      <br />
      <el-form ref="ruleForm" :inline="true" :model="queryData">
        <!-- 第一行 -->
        <el-row style="height: 126px">
          <el-col id="zhulxcol" :span="6">
            <el-form-item>
              <el-select
                clearable
                size="small"
                v-model="queryData.subject_id"
                placeholder="请选择归属学科"
                @change="selectSubjectId($event)"
              >
                <el-option
                  v-for="item in subjectData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col id="zhulxcol" :span="6">
            <el-form-item>
              <el-select
                clearable
                size="small"
                @change="selectSubjectChildId($event)"
                v-model="queryData.directory_id"
                placeholder="请选择归属目录"
              >
                <el-option
                  v-for="item in subjectChild"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col id="zhulxcol" :span="6">
            <el-form-item>
              <el-select
                clearable
                size="small"
                v-model="queryData.tag_id"
                placeholder="请选择标签"
              >
                <el-option
                  v-for="item in subjectChildChild"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col id="zhulxcol" :span="6">
            <el-form-item>
              <el-select
                clearable
                size="small"
                v-model="queryData.directory_id"
                :placeholder="title"
                disabled
              >
                <el-option
                  v-for="item in subjectChild"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <!-- 第二行 -->
          <el-col id="zhulxcol" :span="6">
            <el-form-item>
              <el-select
                clearable
                size="small"
                v-model="queryData.difficulty"
                placeholder="审核通过"
                disabled
              >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col id="zhulxcol" :span="6">
            <el-form-item>
              <el-select
                clearable
                size="small"
                v-model="queryData.paper_type"
                placeholder="上架"
                disabled
              >
              </el-select> </el-form-item
          ></el-col>
          <el-col id="zhulxcol" :span="6">
            <el-form-item>
              <el-input
                size="small"
                clearable
                v-model="queryData.create_name"
                placeholder="请选择创建人"
              ></el-input> </el-form-item
          ></el-col>
          <el-col id="zhulxcol" :span="6">
            <el-form-item>
              <el-select
                size="small"
                clearable
                v-model="queryData.difficulty"
                placeholder="请选择试卷难度"
              >
                <!-- v-for 渲染 -->
                <el-option label="简单" :value="1"></el-option>
                <el-option label="中等" :value="2"></el-option>
                <el-option label="较难" :value="3"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col id="zhulxcol" :span="6">
            <el-form-item>
              <el-select
                clearable
                size="small"
                v-model="queryData.is_true_question"
                placeholder="请输入是否是真题"
              >
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="2"></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col id="zhulxcol" :span="10">
            <el-form-item>
              <el-date-picker
                size="small"
                v-model="queryData.create_time"
                type="daterange"
                style="width: 250px"
                range-separator="至"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                start-placeholder="开始"
                end-placeholder="结束"
              >
              </el-date-picker></el-form-item
          ></el-col>
          <el-col id="zhulxcol" :span="5">
            <el-button size="small" type="primary" @click="inquireFn"
              >查询</el-button
            >
            <el-button size="small" @click="resetFn">重置</el-button>
            <el-button
              size="small"
              type="warning"
              plain
              icon="el-icon-folder-add"
              @click="isDetail = !isDetail"
            ></el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格区域 -->
      <el-table
        empty-text="暂时没有数据"
        tooltip-effect="dark"
        ref="multipleTable"
        @select="select"
        :data="tableData.list"
        style="width: 100%"
      >
        <!-- :reserve-selection="true"放在type="selection"中，是回显数据的必要条件 -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="试题信息"
          width="940"
        >
          <template slot-scope="scope" width="1000">
            <el-row>
              <span class="title" style="margin-right: 10px"
                >ID: <span>{{ scope.row.id }}</span></span
              >
              <span class="title" style="margin-right: 10px">题干信息:</span
              ><a
                v-html="scope.row.question.slice(0, 40)"
                class="titleInfo"
                style="width: 50%"
                @click="lookQuestInfo(scope.row)"
              ></a>
            </el-row>
            <el-row>
              <el-col :span="9" v-if="isDetail">
                <span class="title" style="margin-right: 10px">试题编号:</span>
                {{ scope.row.quest_num }}</el-col
              >
              <el-col :span="5" v-if="isDetail">
                <span class="title" style="margin-right: 10px">试题类型:</span>
                {{
                  scope.row.quest_type === 1
                    ? "单选题"
                    : scope.row.quest_type === 2
                    ? "多选题"
                    : scope.row.quest_type === 3
                    ? "判断题"
                    : "简答题"
                }}</el-col
              >
              <el-col :span="5"
                ><span class="title" style="margin-right: 10px">归属学科:</span>
                {{ scope.row.subject_name }}</el-col
              >
              <el-col :span="5">
                <span class="title" style="margin-right: 10px">归属目录:</span>
                {{ scope.row.directory_name }}</el-col
              >
              <el-col :span="6">
                <span class="title" style="margin-right: 10px">标签信息:</span>
                <span
                  v-for="(item, index) in scope.row.tag_info"
                  :key="index"
                  >{{ item }}</span
                ></el-col
              >
              <el-col :span="6"
                ><span class="title" style="margin-right: 10px">发布状态:</span>
                <el-tag size="mini" type="success">{{
                  scope.row.show_state === 1 ? "上架" : "下架"
                }}</el-tag>
              </el-col>
              <el-col :span="6" v-if="isDetail">
                <span class="title" style="margin-right: 10px">审核人:</span>
                暂无</el-col
              >
              <el-col :span="6" v-if="isDetail">
                <span class="title" style="margin-right: 10px">审核状态:</span>
                <el-tag size="mini" type="success"> 通过</el-tag></el-col
              >
              <el-col :span="6" v-if="isDetail">
                <span class="title" style="margin-right: 10px">审核意见:</span>
                {{ scope.row.check_remarks }}</el-col
              >
              <el-col :span="6" v-if="isDetail">
                <span class="title" style="margin-right: 10px">创建人:</span>
                {{ scope.row.create_name }}</el-col
              >
              <el-col :span="6" v-if="isDetail">
                <span class="title" style="margin-right: 10px">难度:</span>
                {{
                  scope.row.difficulty === 1
                    ? "简单"
                    : scope.row.difficulty === 2
                    ? "中等"
                    : "较难"
                }}</el-col
              >
              <el-col :span="6">
                <span class="title" style="margin-right: 10px">发布时间:</span>
                {{ scope.row.check_time.split(" ")[0] }}
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" style="margin-right: 20px" class="dialog-footer">
        <el-button size="small" @click="okFn" type="primary">确 定</el-button>
        <el-button size="small" @click="clcikHandlerFn">取 消</el-button>
      </span>
      <br />
      <!-- 分页组件 -->
      <PaginationPaper :PaginationInfo="PaginationInfo" @skipPage="skipPage" />
      <!-- 查看题目信息组件 -->
      <lookQuestInfo :singleQuest="singleQuest" ref="lookQuestInfoRef" />
    </el-dialog>
  </div>
</template>
<script>
import lookQuestInfo from "./lookQuestInfo.vue";
import { selectPaperInfoApi } from "@/api/paperInfo";
import PaginationPaper from "./PaginationPaper.vue";
export default {
  name: "selectPaper",
  props: {
    // 全部的数据
    tableData: {
      type: Object,
      required: true,
    },
    // 当前题型已近选中的题目
    selectedQuest: {
      type: Array,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    type: {
      type: Number,
      required: true,
    },
    PaginationInfo: {
      type: Object,
      required: true,
    },
    subjectData: {
      type: Array,
      required: true,
    },
  },
  components: { PaginationPaper, lookQuestInfo },
  data() {
    return {
      subjectChildChild: [],
      flag: true,
      isDetail: true,
      // 归属学科的子集 归属目录
      newTableData: [],
      subjectChild: [],
      // 手机 key 值 用于回显数据
      selectionKeys: [],
      dialogVisible: false,
      queryData: {
        page: 1,
        limit: 10,
        subject_id: "",
        directory_id: "",
        tag_id: "",
        difficulty: "",
        // 必选参数
        quest_type: 0,
        is_true_question: "",
        show_state: 1,
        check_state: 2,
        create_name: "",
        create_time: "",
      },
      // 单个题目信息
      singleQuest: {},
      selectList: [],
    };
  },
  methods: {
    // 关闭按钮
    handleClose(done) {
      this.dialogVisible = false;
    },
    // 确定按钮  不能再handleSelectionChange通知父组件更新数据 要换成点击确定按钮再通知更新shuju
    okFn() {
      // 在此处筛选数据然后传给父组件跟新数据  注意 如果 tabData 没有数据就会报错
      this.$emit("update", this.selectList, this.type);
      this.dialogVisible = false;
    },
    // 选中的表格 触发
    handleSelectionChange(val) {
      // deep copy
      console.log("触发了handleSelectionChange事件");
    },
    select(selection, row) {
      // selection 是当前触发的对象 row 是所有选择的对象
      this.selectList = JSON.parse(JSON.stringify(selection));
      console.log("this.selectList", this.selectList);
    },
    // 取消按钮   关闭弹窗 取消就不能传递数据了
    clcikHandlerFn() {
      // 所有的内容都不会选中
      this.dialogVisible = false;
    },
    // 通知分页
    skipPage(str, val) {
      str === "page"
        ? this.$emit("skipPage", "page", val)
        : this.$emit("skipPage", "limit", val);
    },
    // 二级联动
    selectSubjectId(id) {
      const obj = this.subjectData.filter((item) => {
        return item.id === id;
      });
      this.subjectChild = obj[0].children;
    },
    async inquireFn() {
      // 通知父组件修改数据  时间的处理
      // 处理时间选择器的数据格式  NAN 不影响请求数据
      const t1 = new Date(this.queryData.create_time[0]).getTime();
      const t2 = new Date(this.queryData.create_time[1]).getTime();
      this.queryData.create_time = `${t1},${t2}`;
      this.queryData.quest_type =
        this.title === "单选题"
          ? 1
          : this.title === "多选题"
          ? 2
          : this.title === "判断题"
          ? 3
          : 4;
      this.$emit("EditFn", this.queryData);
    },
    resetFn() {
      this.queryData = this.$options.data.call(this).queryData;
      this.inquireFn();
    },
    // 三级联动 val 是二级的id 我需要根据二级的 id 找到 三级的数据标签
    selectSubjectChildId(id) {
      const obj = this.subjectChild.filter((item) => {
        return item.id === id;
      });
      console.log(obj[0].children);
      this.subjectChildChild = obj[0].children;
    },
    lookQuestInfo(val) {
      this.singleQuest = val;
      this.$refs.lookQuestInfoRef.dialogVisible = true;
    },
    // 定义一个回显函数 是由父组件调用的
    backData() {
      console.log("触发了回显函数", this.selectedQuest, this.tableData);
      // this.$refs.multipleTable.toggleRowSelection(this.tableData.list[1]);
      // console.log(this.selectedQuest.length);
      if (this.selectedQuest.length !== 0) {
        console.log("开始回显");
        this.tableData.list.forEach((item) => {
          this.selectedQuest.forEach((ele) => {
            if (ele.id === item.id) {
              // 此时的 item 试题可以回显
              this.$refs.multipleTable.toggleRowSelection(item);
            }
          });
        });
      }
    },
  },
};
</script>

<style lang="sass" >
#selectPaper
#zhulxcol
    height: 50px

#eldialog__body
    padding: 0 !important

.titleInfo
    display: inline-block
    color: blue
.titleInfo:hover
    color: red
.title
    color: gray

.dialog-footer
    margin-right: 420px !important

.dialogClass .el-dialog__body
    padding: 20px
    padding-top: 10px
    padding-bottom: 10px

.dialogClass .el-dialog__footer
    text-align: right
</style>